<template>
  <div class="group-message">
    <div class="edit-btn-content">
      <!-- <goBack @changeGoBack="changeGoBack" /> -->
      <el-button type="primary" plain icon="EditPen" @click="handleGroupMenu" v-if="isGroupEdit && getTrialStatus == '1'"
        >编 辑</el-button
      >
    </div>
    <avue-form :option="groupOption" v-model="form" @submit="submit"></avue-form>
  </div>
</template>
<script setup>
import goBack from './goBack.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getList, getDetail, add, update, remove } from '@/api/group/group';
import option from '@/option/group/group';
import { ref, reactive, computed, onMounted, defineEmits,nextTick } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const emit = defineEmits();
const routerQuery = ref({});
routerQuery.value = route.query;
const form = ref({});
const groupOption = ref(option);
let isGroupEdit = ref(true);

let getTrialStatus = ref(localStorage.getItem('storageTrialStatus'));
console.log('这里是什么',getTrialStatus.value);

groupOption.value.span = 24;
groupOption.value.disabled = true;
groupOption.value.submitBtn = false;
groupOption.value.emptyBtn = false;
const handleGroupMenu = () => {
  groupOption.value.disabled = false;
  groupOption.value.submitBtn = true;
  groupOption.value.emptyBtn = true;
  isGroupEdit.value = false;
};
// 表单提交按钮
const submit = (form, done) => {
  update(form)
    .then(() => {
      ElMessage.success('操作成功!');
      groupOption.value.span = 24;
      groupOption.value.disabled = true;
      groupOption.value.submitBtn = false;
      groupOption.value.emptyBtn = false;
      isGroupEdit.value = true;
      done();
    })
    .catch(error => {
      done();
      window.console.console.log(error);
    });
};
const changeGoBack = () => {
  groupOption.value.span = 12;
  emit('changeGoBack');
};
onMounted(() => {
  if(routerQuery.value.groupId){
    initDetail(routerQuery.value.groupId);
  }
  groupOption.value.column.forEach((item) => {
    if(item.prop === 'deptCaseNums'){
      item.display = false;
    }
    if(item.prop === 'caseNum'){
      item.disabled = true;
    }
    if(item.prop === 'collectionSequence'){
      item.disabled = true;
    }
  })
});
// const open = (id) => {
//   initDetail(id)
// }
const initDetail = id => {
  getDetail(id).then(res => {
    nextTick(() => {
      form.value = res.data.data;
    })
  });
};
// defineExpose({
//   open,
// });
</script>
<style scoped>
.group-message {
  width: 90%;
  height: 100%;
}
.edit-btn-content {
  margin-bottom: 10px;
}
</style>